<template>
  <div>
    <img src="../../public/images/home-bg.jpg" alt="background" class="w-screen m-0 z-0 fixed" />
    <nav class="top-nav relative">
      <div class="container flex">
        <!-- 返回首页按钮 -->
        <button class="text-white text-4xl top-0 right-0 px-6 py-3 rounded-lg hover:bg-amber-600 focus:outline-none" @click="goToExhibitions">
          <span>< 返回</span>
        </button>
        <h1 class="logo text-amber-600">趣味博物馆</h1>
        <ul class="nav-links flex items-center justify-center">
          <li class="text-5xl mx-4"><a href="/Home">主页</a></li>
          <li class="text-5xl mx-4"><a href="/Exhibitions" class="active">文物鉴赏</a></li>
          <li class="text-5xl mx-4"><a href="/Camera">互动体验</a></li>
          <li class="text-5xl mx-4"><a href="/About">关于我们</a></li>
        </ul>
      </div>
    </nav>
    <div class="content relative">
      <div v-if="currentArtifact" class="artifact-detail bg-white shadow-2xl rounded-2xl mx-auto opacity-90">
        <h2 class="text-amber-600 font-bold">{{ currentArtifact.name }}</h2>
        <p><strong>时期：</strong>{{ currentArtifact.period }}</p>
        <p><strong>文物级别：</strong>{{ currentArtifact.level }}</p>
        <p><strong>出土地点：</strong>{{ currentArtifact.discoveryLocation }}</p>
        <p><strong>尺寸：</strong>{{ currentArtifact.dimensions }}</p>
        <p><strong>重量：</strong>{{ currentArtifact.weight }}</p>
        <p><strong>材质：</strong>{{ currentArtifact.material }}</p>
        <p><strong>描述：</strong>{{ currentArtifact.description }}</p>
      </div>
      <p v-else>文物ID: {{ id }}</p>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, computed } from 'vue';
import { useRoute } from 'vue-router';
import { useRouter } from 'vue-router';

const route = useRoute();
const router = useRouter();
const id = ref<number>(Number(route.params.id));

interface Artifact {
  name: string;
  period: string;
  level: string;
  discoveryLocation: string;
  dimensions: string;
  weight: string;
  material: string;
  description: string;
}
// 假设的文物数据
const artifactsData: Record<number, Artifact> = {
  1: {
    name: '青铜鼎',
    period: '商周时期',
    level: '一级文物',
    discoveryLocation: '未知',
    dimensions: '高5.5厘米，口径13.7厘米，足径6.8厘米',
    weight: '392克',
    material: '青铜',
    description: '商周时期最重要的礼器之一，这件青铜鼎造型庄重，纹饰精美，承载着深厚的历史文化内涵，见证了古代祭祀与权力象征等诸多方面。'
  },
  2: {
    name: '青花瓷瓶',
    period: '明清时期',
    level: '一级文物',
    discoveryLocation: '江西省景德镇',
    dimensions: '高35厘米，口径10厘米，底径12厘米',
    weight: '1500克',
    material: '瓷器',
    description: '明清时期景德镇出品的青花瓷瓶，以其独特的青花纹饰和精美的工艺著称，展现了中国瓷器艺术的高峰，是中国古代瓷器中的珍品。'
  },
  3: {
    name: '汉代玉璧',
    period: '汉代',
    level: '特级文物',
    discoveryLocation: '陕西省西安市',
    dimensions: '直径15厘米，孔径4厘米',
    weight: '250克',
    material: '玉石',
    description: '汉代的玉璧，以其精湛的雕刻技艺和温润的玉质而闻名，是汉代玉器中的精品，反映了汉代玉器工艺的高超水平和审美风格。'
  },
  4: {
    name: '唐代三彩马',
    period: '唐代',
    level: '一级文物',
    discoveryLocation: '河南省洛阳市',
    dimensions: '高40厘米，长30厘米，宽10厘米',
    weight: '5000克',
    material: '陶土',
    description: '唐代三彩马以其鲜艳的釉色和生动的造型而闻名，是唐代陶瓷艺术的代表，展现了唐代陶瓷工艺的高超技艺和艺术成就。'
  },
};

// 获取当前文物详情，添加错误处理逻辑
const currentArtifact = computed(() => {
  const artifact = artifactsData[id.value];
  if (artifact) {
    return artifact;
  } else {
    console.error(`不存在ID为${id.value}的文物信息，请检查数据或路由参数`);
    return null;
  }
});
// 新增，返回首页按钮点击事件处理函数
const goToExhibitions = () => {
  router.push('/Exhibitions');
};
</script>

<style scoped>
/* 添加您的CSS样式 */
.top-nav {
  background-color: #333;
  color: white;
  padding: 10px 0;
}

.container {
  width: 100%;
  justify-content: space-between;
}

/* Logo */
.logo {
  font-size: 56px;
  font-weight: bold;
}
.nav-links {
  list-style: none;
  display: flex;
}
.nav-back{
  font-size: 40px;
}

/* 导航链接 */
.nav-links a {
  color: #FFDEAD;
  text-decoration: none;
  transition: color 0.3s;
}

.nav-links a:hover,
.nav-links a.active {
  color: #DAA520; /* 金色 */
}

.content {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 100%;
  height: 50vw;
}

/* 文物详情 */
.artifact-detail {
  padding: 30px;
  width: fit-content;
  height: fit-content;
  margin-top: 10vw;
}

.artifact-detail h1 {
  font-size: 56px;
  margin-bottom: 20px;
}

.artifact-detail h2 {
  font-size: 60px;
  margin-bottom: 10px;
}

.artifact-detail p {
  margin: 24px 0;
  font-size: 40px;
}
</style>